<template>
  <div>
    <div style="height: 60px"></div>

    <user-small-panel></user-small-panel>

    <user-setting-panel class="text-center"></user-setting-panel>
  </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { cloneDeep, isString } from 'lodash'
import { Tag, ToolList, UserInfo } from 'src/store/tool/state'
import iTool from 'src/api/tool'
import UserSettingPanel from 'components/UserSettingPanel.vue'
import UserSmallPanel from 'components/UserSmallPanel.vue'

export default defineComponent({
  name: 'Setting',
  components: {
    UserSettingPanel,
    UserSmallPanel
  },
  async preFetch ({
    store,
    currentRoute,
    previousRoute
  }) {
    if (previousRoute && previousRoute.name === 'AppDetail') return
    if (previousRoute && currentRoute && previousRoute.name === 'ToolIndex' && currentRoute.name === 'AppDetail') {
      return
    }
    const indexId = currentRoute.params.index
    await store.dispatch('tool/initTag')
    // 用户收藏点赞应用不走 SSR
    if (indexId === 'my-like' || indexId === 'my-collection') return
    // 搜索走 SSR
    if (indexId === 'search') {
      await store.dispatch('tool/initTool', {
        keywords: currentRoute.query.keywords
      })
      return
    }
    // 专题走 SSR
    if (indexId === 'topic') {
      const ids = currentRoute.query.ids
      await store.dispatch('tool/initTool', {
        ids: isString(ids) ? ids.split(',') : null
      })
      return
    }
    await store.dispatch('tool/initTool', { ids: [indexId] })
  },
  data () {
    return {
      isShow: false,
      left: true,
      darkMode: false,
      keepLogin: false,
      topics: [],
      topicName: ''
    }
  },
  computed: {
    tagGroups (): (Tag & {
      tags: { name: string } [], _id: string
    })[] {
      const tags = cloneDeep(this.$store.state.tool.tag.list) as (Tag & {
        tags: { name: string } [], _id: string
      })[]
      const groups = tags.filter((tag) => {
        if (tag.level === 1) {
          tag.tags = []
        }
        return tag.level === 1
      })
      for (const tag of tags) {
        if (tag.level === 1) continue
        const lv1Tag = groups.find((group) => {
          return tag.parentTags.find((e: string) => {
            return e === group._id
          }) || null
        })
        if (lv1Tag) {
          lv1Tag.tags.push(tag)
        }
      }
      return groups
    },
    toolList () {
      return this.$store.state.tool.tool.list as ToolList
    },
    userInfo () {
      return this.$store.state.userInfo as UserInfo
    }
  },
  watch: {},
  async mounted () {
    this.isShow = true
    this.topics = await iTool.findAllTopic()
  },
  methods: {
    async clickTopic (topic: { name: string, tags: { _id: string }[] }) {
      await this.$router.push({
        name: 'ToolIndex',
        params: {
          index: 'topic'
        },
        query: {
          name: topic.name,
          ids: topic.tags.map((e) => e._id).join(',')
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../../css/quasar.variables.scss';

.search-bar {
  height: 80px;

  .search-bar-input {
    width: 500px;
  }

  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: top left -210px;
    opacity: 0.85;
  }
}

@media (max-width: $breakpoint-xs) {
  .search-bar {
    height: 80px;

    .search-bar-input {
      width: 320px;
    }
  }
}
</style>
